{% extends 'base.html' %}

{% block inline_css %}
{% include 'user_image/image_set.css' %}
{% include 'tag/list.css' %}
<style type="text/css">
#recent_images {
    float: left;
    width: 705px;
}
#popular_tags {
    float: right;
    width: 250px;
    height: 580px;
    padding: 10px;
    overflow: hidden;
    background-color: #eee;
}
#tag_text {
    font-size: 90%;
}
#newest_users {
    float: left;
}
#recent_comments {
    float: right;
    width: 600px;
    padding-right: 10px;
}
</style>
{% endblock %}

{% block javascript %}
{{ block.super }}
<script type="text/javascript">
$(document).ready(function() {
    $("#id_tag_query").autocomplete('/tags/autocomplete');
    $("#id_user_query").autocomplete('/users/autocomplete');
});
</script>
{% endblock %}

{% block title %}
Explore
{% endblock %}

{% block content %}
<div id="recent_images"> 
    <h2 style="display:inline-block">Recent Images</h2> (<a href="{% url 'images' %}">Browse All / Search</a>)<br />
    {% include 'user_image/image_set.html' with images=recent_images thumbnail_size='medium' %}
</div>

<div id="popular_tags">
    <h2 style="display:inline-block">Popular Tags</h2> (<a href="{% url 'tags' %}">View All</a>)<br />
    <form method="get" action="{% url 'tags' %}">
        <input type="text" name="query" id="id_tag_query" autocomplete="off" /> 
        <input type="submit" value="Find Tag" />
    </form>
    <div id="tag_text">
        {% include 'tag/list.html' with tags=popular_tags %}
    </div>
</div>
<div style="clear:both"></div>

<div id="newest_users">
    <h2>Newest Members</h2>
    <form method="get" action="{% url 'users' %}">
        <input type="text" name="query" id="id_user_query" autocomplete="off" /> 
        <input type="submit" value="Find User" />
    </form>
    <br />
    {% for user in newest_users %}
        {% include 'user/display_name.html' with user=user %}<br />
    {% endfor %}
</div>

<div id="recent_comments">
    <h2>Recent Comments</h2>
    {% for comment in recent_comments %}
    <div class="comment">
        <div class="comment_text">
            {% include 'user/display_name.html' with user=comment.author %} commented on 
            <a href="{{ comment.recipient.userimage.get_absolute_url }}">
                {% include 'user_image/filename.html' with filename=comment.recipient.userimage.original_file_name %}
            </a>: 
            {{comment.text|slice:":100"}}{% if comment.text|length > 100 %}...{% endif %}
        </div>
        <div class="comment_footer">
            <span class="timestamp">{{ comment.created_at }} ({{comment.created_at|timesince}} ago)</span>
        </div>
    </div>
    <hr />
    {% endfor %}
</div>
<div style="clear:both"></div>
{% endblock %}

